/**
 * 未授权页面组件
 * 当用户权限不足时显示此页面
 * 
 * 功能说明：
 * - 显示权限不足提示
 * - 提供返回按钮
 * - 引导用户联系管理员
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, NavBar, Space } from 'antd-mobile'
import { ExclamationCircleOutline, LeftOutline } from 'antd-mobile-icons'
import styles from './index.module.css'

/**
 * 未授权页面组件
 * @returns {JSX.Element} 未授权页面
 */
const Unauthorized = () => {
  const navigate = useNavigate()

  const handleGoBack = () => {
    navigate(-1)
  }

  const handleGoHome = () => {
    navigate('/home')
  }

  const handleContactAdmin = () => {
    // 可以跳转到客服页面或显示联系方式
    navigate('/customer-service')
  }

  return (
    <div className={styles.container}>
      {/* 顶部导航 */}
      <NavBar
        onBack={handleGoBack}
        style={{ '--height': '44px' }}
      >
        权限不足
      </NavBar>

      {/* 主要内容 */}
      <div className={styles.content}>
        {/* 图标 */}
        <div className={styles.icon}>
          <ExclamationCircleOutline fontSize={80} color="var(--adm-color-warning)" />
        </div>

        {/* 标题 */}
        <h1 className={styles.title}>访问受限</h1>
        
        {/* 描述 */}
        <div className={styles.description}>
          <p>抱歉，您没有权限访问此页面。</p>
          <p>如需帮助，请联系系统管理员。</p>
        </div>

        {/* 操作按钮 */}
        <Space direction="vertical" style={{ width: '100%' }}>
          <Button
            color="primary"
            size="large"
            block
            onClick={handleGoHome}
          >
            返回首页
          </Button>
          
          <Button
            color="default"
            size="large"
            block
            onClick={handleGoBack}
            icon={<LeftOutline />}
          >
            返回上页
          </Button>
          
          <Button
            color="default"
            size="large"
            block
            onClick={handleContactAdmin}
          >
            联系管理员
          </Button>
        </Space>

        {/* 帮助信息 */}
        <div className={styles.help}>
          <h3>常见问题</h3>
          <ul>
            <li>请确认您已正确登录</li>
            <li>检查您的账户权限设置</li>
            <li>联系管理员获取相应权限</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Unauthorized
